
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../css/popup.css"/>
        <link rel="stylesheet" type="text/css" href="../css/kapiform.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jq.date.js"></script>  
        <link rel="stylesheet" type="text/css" href="../css/ui.datepicker.css"/>
        <script type="text/javascript">
            var open_cur = 0;
            $j = jQuery.noConflict();
        
            $j(document).ready(function(){   
                
                var PN100i  =$j('.customer-box').attr("lang");
                //  alert(PN100i);
                $j('input#dateStart, input#dateEnd').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true }); 
                $j('.header-box').live('click', function(){
                  
                    $j('.mesage').text('');
                    if($j(this).next('.customer-box').css('display') != 'none'){
                      
                        return;
                    }else{
                        var PN100  =$j('.pn100lang').attr("lang");
                       
                        var PN100i  =$j('.customer-box').attr("lang");
                       
                        if(PN100 != 0)
                        {
                            $j('.messa').hide();
                            $j('.customer-box').slideUp();                         
                            $j('.boder-bomttom').removeClass('boder-bomttom');
                            $j(this).next('.customer-box').slideDown();
                            $j(this).addClass('boder-bomttom');
                        } 
                        else{
                        
                            $j('.messa').show();
                            $j(this).next('.customer-box').css('display') != 'none'
                        }
                           
                    }

                });
                
               
                var b = location.pathname;
                $j("input[id$='message']").val(b);
                //validateform("job");
                
                $j('input#date').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true }); 
                
                 var PN100 = $j('#form-input-customer\\:beginContructor').val();
                   
                $j('#fancybox-close').live('click', function(){
                    
                     if(PN100==3){
                         window.location.href="employeeDelete.jsp";
                     }else{
                         window.location.href="employeenew.jsp";
                     }
                    
                });
                $j('.closeform').live('click', function(){
                    window.location.href="employeenew.jsp";
                });
                 $j('.closeformDel').live('click', function(){
                    window.location.href="employeeDelete.jsp";
                });
                $j(".more_detail_vh").live("click",function(){
                    //  alert($j(this).parent(".customer-box").find(".popup-footer").attr("class"));
                    $j(".more_detail_vh_down").css("display","block");
                    $j(".more_detail_vh").css("display","none");
                    $j(".morevh").css("display","block");
                    $j(this).parent(".customer-box").css("height","380px");
                    $j(this).parent(".customer-box").find(".popup-footer").css("margin-top","60px");
                });
                $j(".more_detail_vh_down").live("click",function(){
                    //  alert($j(this).parent(".customer-box").find(".popup-footer").attr("class"));
                    $j(".more_detail_vh").css("display","block");
                    $j(".more_detail_vh_down").css("display","none");
                    $j(".morevh").css("display","none");
                    $j(this).parent(".customer-box").css("height","234px");
                    $j(this).parent(".customer-box").find(".popup-footer").css("margin-top","5px");
                });

            });

        </script>
        <style type="text/css">
            .bg_department{
                height: 68px !important;
            }
            .feild_sex td label{
                color:#4C4C4C;
            }
            #ui-datepicker-div
            {
                z-index: 9999999;
            }
            #fancybox-wrap{

            }
            .fields_input{
                float:left;
                width:100%;

                margin-top:4px !important;
            }
            .button-link{
                border:0;
                background:url(../images/bg_submit.gif) repeat-x;
                width:134px;
                float:right;
                margin:19px 0 10px 0;
                color:#ffffff;
                font-size:14px;
                font-weight:bold;
                cursor:pointer;
                border-radius:5px;
                box-shadow:0 2px 3px #666666;
                padding:8px 0;
                text-transform:uppercase;
            }
            .customer-box{
                float:left; width:720px; margin-left:25px;
                border:1px solid #CCCCCC;
                padding:18px 0px 10px 0px;
                background: #E5E8EA;
                border-top: none;

            }
            .customer-box label{
                width:130px;
                text-align: right;
                float:left;
            }
            input{
                float:left;
                margin-left:9px;
            }
            select{
                float:left;
                height: 21px;
                width:166px;
                margin-left:9px;
            }

            .del {
                float: left;
                margin-top: 9px;
            }
            .ui-datepicker-header select{
                width:45% !important;
            }
            .header-box{
                margin-left:25px;
                color:#263340;
                margin-top:15px;
                float: left;
                cursor:pointer; padding:4px 0px 0px 4px; width:716px; border:1px solid #CCCCCC;
                font-size:15px;
                background: #D4D7D8;
                height: 21px;
            }
            .fixdate .ui-datepicker-trigger  { margin-left: 4px;}

            .boder-bomttom{}
            .buttonsearch{
                border:0;
                background:url(../images/btn_search.png) repeat-x;
                width:30px; height:30px;
                color:#ffffff;
                cursor:pointer;
                text-transform:uppercase;
            }/*

            .buttonsearch:hover .group{display: block !important;}
            */            .buttonsearch2{
                border:0;
                background:url(../images/bg_submit.gif) repeat-x;
                width:68px;

                margin:0px 0 10px 20px;
                color:#ffffff;
                font-size:12px;
                font-weight:bold;
                cursor:pointer;
                border-radius:2px;
                padding:4px 0;
                text-transform:uppercase;
            }
            img.ui-datepicker-trigger {
                cursor: pointer;
                height: 17px;
                position: relative;
                width: 17px;
            }

            .morevh{
                display:none;
            }
            .more_detail_vh{
                color: #0C70D3;
                cursor: pointer;
                float: right;
                margin-right: 35px;
                margin-top: -10px;
            }
            .more_detail_vh_down{
                color: #0C70D3;
                cursor: pointer;
                float: right;
                margin-right: 35px;
                margin-top: -10px;
                display: none;
            }
        </style>
    </head>

    <f:view>

        <body style=" float:left; width:auto; height:auto; margin:0px;">
            <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>


            <div class="popup" style="height:auto; width:770px">
                <div class="popup-header">
                    <div class="title"><h:outputText value="Thêm nhân viên"/></div>
                </div>

                <div class="popup-content">
                    <a4j:form id="form-input-customer" >
                        <h:inputHidden value="#{EmpBean.pn100}" id="PN100_Emp"/>
                          <h:inputHidden id="beginContructor" value="#{EmpBean.beginContructor}"/>
                        <!-- Thông tin cơ bản ------------------------------------>
                        <span  class="header-box boder-bomttom" ><h:outputText value="Thông tin cơ bản" lang="#{EmpBean.pn100}" id="pn100lang" styleClass="pn100lang"/></span>

                        <div class="customer-box" style="" lang="<h:outputText value="#{EmpBean.pn100}"/>">
                            <div style="float:left; width:50%;">
                                <div class="fields_input">
                                    <label><h:outputText value="Họ"/>*:</label>&nbsp;
                                    <h:inputText value="#{EmpBean.nv102}" onkeyup="this.value=this.value.toUpperCase();" >
                                    </h:inputText>

                                </div>
                                <div class="fields_input">
                                    <label><h:outputText value="Tên lót"/>:</label>&nbsp;
                                    <h:inputText value="#{EmpBean.nv127}" onkeyup="this.value=this.value.toUpperCase();">
                                    </h:inputText>

                                </div>
                                <div class="fields_input">
                                    <label><h:outputText value="Tên"/>*:</label>&nbsp;
                                    <h:inputText value="#{EmpBean.nv103}" onkeyup="this.value=this.value.toUpperCase();" ></h:inputText>
                                    </div>


                                </div>
                                <div style="float:left; width:50%;">
                                    <div class="fields_input">
                                        <label> <h:outputText value="#{locale.sex}"/>*:</label>
                                    <h:selectOneMenu value="#{EmpBean.sexChangeItem}">
                                        <f:selectItem itemValue="M" itemLabel="Nam" />
                                        <f:selectItem itemValue="F" itemLabel="Nữ"/>
                                    </h:selectOneMenu>
                                </div>
                                <div class="fields_input">
                                    <label><h:outputText value="Ngày sinh"/>:</label>&nbsp;
                                    <input value="<h:outputText value="#{EmpBean.dateBorn}">
                                               <f:convertDateTime pattern="dd/MM/yyyy"/> 
                                           </h:outputText>" 
                                           type="text" id="date" name="date" class="" />
                                </div>
                                <div class="fields_input">
                                    <label><h:outputText value="Tình trạng hôn nhân"/>:</label>&nbsp;
                                    <h:selectOneMenu value="#{EmpBean.status_family}">
                                        <f:selectItem itemLabel="Chưa kết hôn" itemValue="0" />
                                        <f:selectItem itemLabel="Đã kết hôn" itemValue="1" />
                                    </h:selectOneMenu>
                                </div>
                            </div>
                            <div style="float: left;margin-left: 0px;width:90%">
                                <div class="fields_input">
                                    <label><h:outputText value="Tên đăng nhập"/></label>
                                    <h:inputText style="width:242px;" value="#{EmpBean.nv106}" onkeyup="this.value=this.value.toUpperCase();">
                                    </h:inputText>
                                </div>
                            </div>
                            <div class="popup-footer" style="height:40px;">
                                <h:outputText value="#{EmpBean.messageform}" id="mesage" styleClass="mesage"/>
                                <h:inputHidden id="pn100" value="#{EmpBean.pn100}"/>
                              
                                <a4j:commandButton  value='#{locale.save}' actionListener="#{EmpBean.saveEmployee}"
                                                    onclick="showPleaseWait();$j('.mesage').text('');"
                                                    oncomplete="hidePleaseWait();" style=""
                                                    styleClass="buttonsave" reRender="mesage,pn100,pn100lang">

                                </a4j:commandButton>
                            </div>
                            <!-- End List Content-->
                        </div>
                    </a4j:form>

                    <!--Thông tin cá nhân--------------------------------------------------->
                    <a4j:form>
                        <span class="header-box infoL200"><h:outputText value="Thông tin cá nhân"/></span>

                        <div class="customer-box" style="display:none;">
                            <div class="customer-boxL200">
                                <!-- Danh cho from contact N950 ------------------------------------------>
                            </div>
                            <!-- End List Content-->
                        </div>

                    </a4j:form>
                    <!-- Thông tin liên lạc ------------------------------->
                    <a4j:form>

                        <span class="header-box contactN950"><h:outputText value="#{locale.contact_info}"/></span>
                        <div class="customer-box" style="display:none;">
                            <div class="customer-boxcontact">
                                <!-- Danh cho from contact N950 ------------------------------------------>
                            </div>

                        </div>


                    </a4j:form>


                    <!-- Giấy tờ tùy thân ------------------------------------------>

                    <a4j:form>
                        <span class="header-box infoN350" ><h:outputText value="#{locale.papers_person}"/></span>
                        <div class="customer-box" style="display:none">
                            <div class="customer-boxN350">
                                <!-- Danh cho from contact N950 ------------------------------------------>
                            </div>
                        </div>

                    </a4j:form>

                    <!-- Tài khoản ------------------------------->    

                    <a4j:form id="formAccount">
                        <span class="header-box acountT025" ><h:outputText value="#{locale.bank_account}"/></span>

                        <div class="customer-box" style="display:none">

                            <div class="customer-boxacount">
                                <!-- Danh cho from contact N950 ------------------------------------------>
                            </div>
                        </div>

                    </a4j:form>
                    <div class="messa" style=" margin-left: 89px;margin-top: 360px !important;padding-top:5px;padding-bottom: 5px;">                                
                        <h:outputText id="message" value="Xin vui lòng lưu nhân viên !" style="display:none;margin-left:200px;color:red;font-weight:bold;font-style:italic;" styleClass="messa"/>
                    </div>

                </div>


                <div class="popup-footer">
                    <h:panelGroup rendered="#{EmpBean.beginContructor != 3}"> <div class="buttonsave closeform" style="margin-right:33px;"  ><span><h:outputText value="#{locale.close}"/></span></div></h:panelGroup>
                       <h:panelGroup rendered="#{EmpBean.beginContructor == 3}"> <div class="buttonsave closeformDel" style="margin-right:33px;"  ><span><h:outputText value="#{locale.close}"/></span></div></h:panelGroup>
                </div>    
            </div>
        </body>

    </f:view>
</html>
<script type="text/javascript">
    $j(document).ready(function(){
        yhight = ($j('.popup').height()-90)+"px" ;
        $j('.main_content').css('height',yhight );
        $j('.popup-content').css('height',yhight );
    });
</script>